<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-26 20:54:32
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-29 14:49:55
 * @Description: 
-->
<template>
  <div class="common-layout">
    <el-container class="main-container">
      <el-aside width="auto">
        <Suspense>
          <SideBar />
        </Suspense>
      </el-aside>
      <el-container>
        <el-header height="60px">
          <Suspense>
            <NavBar />
          </Suspense>
        </el-header>
        <el-main>
          <Suspense>
            <RouterView class="content" />
          </Suspense>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import SideBar from "./SideBar.vue";
import NavBar from "./NavBar.vue";
</script>

<style lang='less' scoped>
.common-layout {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .el-aside {
    height: 100vh;
    // border-right: 1px var(--el-border-color) solid;
    overflow-x: hidden;
  }
  .el-header {
    height: 60px;
    width: 100%;
    border-bottom: 1px var(--el-border-color) solid;
  }
  .el-main {
    background: var(--el-fill-color);
    height: calc(100vh - 60px);
    overflow-y: auto;
    .content {
      width: 100%;
      margin: 0 auto;
    }
  }
}
</style>
